<template>
  <div :class="['child-atlas-wrap', {'is-search': isSearch}]">
    <Header v-if="!isSearch" fixed>
      <NavTitle :title="$route.query.atlasName" />
    </Header>
    <List ref="list" :reset-fun="resetPhotoList" :finished.sync="finished" :load="load" :refresh="load">
      <div slot="list" class="child-atlas">
        <van-row gutter="11">
          <van-col v-for="(p,i) in list" :key="i" span="12">
            <div class="list-child-atlas-item">
              <ImageVideo class="list-child-atlas-item-img" fit="fit" :src="p.picUrl" @click.stop.native="cilckHandle(p)" />
              <div class="list-child-atlas-item-name">{{ p.atlasName }}</div>
            </div>
          </van-col>
        </van-row>
      </div>
    </List>
    <div :style="{width: showFilter?'100vw':'0'}" :class="['making', {'filter-is-search':isSearch&&!navHidden}]">
      <div :class="['filter-container', {'filter-is-search':isSearch&&!navHidden}]">
        <div :class="['filter-text']" :style="filterBg" @click.stop="filterClickHandle">
          <span>筛选</span>
          <svg-icon class="icon" :icon-class="iconClass" />
        </div>
        <div v-show="showFilter" class="content">
          <Scroll vertical width="75vw" height="100%" class="filter-content">
            <div class="filter-title">筛选</div>
            <div class="condition-container">
              <div v-for="(c,i) in filterList" :key="i" class="condition-item">
                <div class="condition-item-title">{{ c.name }}</div>
                <div class="condition-item-list">
                  <div v-for="(item,n) in c.child" :key="n" class="condition-item-list-item">
                    <div :class="{selectedClass: item.selected}" @click.stop="selectedClick(item)">{{ item.name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </Scroll>
          <div class="btn-group">
            <van-button @click="resetHandle">重置</van-button>
            <van-button @click="confirmHandle">确定</van-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import List from '@/components/List'
import ImageVideo from '@/components/ImageVideo'
import NavTitle from '@/components/NavTitle'
import Scroll from '@/components/Scroll'
import Header from '@/components/Header'
import LeftBg from '@/assets/left.png'
import RightBg from '@/assets/right.png'
import { getTreeById } from '@/apis/atlas'
import { atlasAttribute, atlas } from '@/apis/search'
export default {
  name: 'AtlasChild',
  refresh: true,
  components: {
    List,
    ImageVideo,
    NavTitle,
    Scroll,
    Header
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    searchValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      finished: false,
      list: [],
      showFilter: false,
      filterList: [],
      filterResult: [],
      // 临时存储当前选择项，关闭时清除
      tmpSelected: [],
      navHidden: false
    }
  },
  computed: {
    iconClass() {
      return this.showFilter ? 'shuangjiantouyou' : 'shuangjiantouzuo'
    },
    filterBg() {
      const style = {
        backgroundImage: `url(${LeftBg})`
      }
      if (this.showFilter) {
        style.backgroundImage = `url(${RightBg})`
      }
      return style
    },
    isSearch() {
      return this.$route.name === 'SearchAtlas'
    }
  },
  watch: {
    showFilter(v) {
      if (v) {
        document.body.style.overflow = 'hidden'
      } else {
        document.body.style.overflow = 'initial'
      }
    }
  },
  created() {
    this.getAttrsData()
    this.$on('refresh', this.resetPageData)
  },
  beforeRouteLeave(to, from, next) {
    if (to.name !== 'AtlasLastPreview') {
      this.$removeKeepAliveCache(this)
    }
    next()
  },
  methods: {
    resetPageData() {
      if (this.$refs.list) {
        this.$refs.list.resetPageData()
      }
    },
    load(page, rows) {
      const fr = this.filterResult.filter(e => e.child.length > 0)
      if (this.isSearch || fr.length > 0) {
        const data = {
          isLast: 1,
          ev: fr.map(e => {
            return e.child.map(c => {
              return `${e.id}_${c.id}`
            }).join('@')
          }).join('@'),
          keyword: this.searchValue,
          levelType: ['THIRD'],
          parentId: this.id || '',
          page,
          rows
        }
        return atlas(data).then(res => {
          const data = res.data.atlasPageDTOS
          if (!data) {
            this.finished = true
            return
          }
          this.list.push(...(data.records || []))
          if (this.list.length >= data.totalPages) {
            this.finished = true
          }
        })
      } else {
        if (!this.id) return Promise.reject()
        return getTreeById(this.id).then(res => {
          this.list = res.data
          this.finished = true
        })
      }
    },
    // 获取图册属性
    getAttrsData() {
      atlasAttribute().then(res => {
        this.filterList = res.data
      })
    },
    // 重置
    resetPhotoList() {
      this.list = []
    },
    cilckHandle(p) {
      this.$router.push({ name: 'AtlasLastPreview', params: { id: p.id }, query: { atlasName: p.atlasName }})
    },
    filterClickHandle() {
      if (this.showFilter) {
        for (const item of this.tmpSelected) {
          this.$set(item, 'selected', !item.selected)
        }
      }
      this.tmpSelected = []
      this.showFilter = !this.showFilter
      if (this.showFilter) {
        this.navHidden = document.querySelector('.nav-container').getBoundingClientRect().height <= 0
      }
    },
    // 选择
    selectedClick(item) {
      if (item.selected) {
        item.selected = false
      } else {
        this.$set(item, 'selected', true)
      }
      this.svaeTmpSelected(item)
    },
    svaeTmpSelected(item) {
      if (this.tmpSelected.indexOf(item) === -1) {
        this.tmpSelected.push(item)
      }
    },
    // 确定
    confirmHandle() {
      this.filterResult = this.$deepCopy(this.filterList).map(e => {
        e.child = e.child.filter(e => e.selected)
        return e
      })
      this.showFilter = false
      this.tmpSelected = []
      // this.finished = false
      this.resetPageData()
    },
    // 重置
    resetHandle() {
      this.filterList = this.filterList.map(e => {
        e.child = e.child.map(e => {
          e.selected = false
          return e
        })
        return e
      })
      this.tmpSelected = []
      this.filterResult = []
    }
  }
}
</script>
<style lang="less" scoped>
.is-search{
  padding-top: 0 !important;
}
.filter-is-search{
  padding-top: 50px !important;
}
.child-atlas-wrap{
  position: relative;
  padding-top: 44PX;
  .filter-container{
    position: fixed;
    right: 0;
    top: 44PX;
    bottom: 0;
    display: flex;
    align-items: center;
    .filter-text{
      // position: fixed;
      // top: 50vh;
      // transform: translateY(-50%);
      // right: 0;
      width: 25px;
      flex: 0 0 25px;
      height: 82px;
      font-size: 14px;
      color: #fff;
      padding: 12px 5px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      background-repeat: no-repeat;
      background-size: contain;
      &>.icon{
        width: 11px;
        height: 12px;
        color: #fff;
        fill: #fff;
      }
    }
    .content{
      align-self: stretch;
      height: 100%;
      background-color: #fff;
    }
    .filter-content{
      z-index: 999;
      width: 279px;
      // height: calc(100vh - 115px);
      background-color: #fff;
      .filter-title{
        background-color: #F7F7F7;
        padding: 10px 20px;
        color: #333;
        font-size: 16px;
        font-weight: 600;
      }
      .condition-container{
        padding-bottom: 40px;
        .condition-item{
          .condition-item-title{
            padding: 10px 20px;
            font-size: 14px;
            color: #333;
            font-weight: 600;
          }
          .condition-item-list{
            display: flex;
            width: calc(100% - 14px);
            flex-wrap: wrap;
            align-items: center;
            margin: 0 -5.5px;
            padding-left: 20px;
            .condition-item-list-item{
              padding: 0 5.5px;
              flex: 0 0 85px;
              height: 26px;
              box-sizing: border-box;
              margin-bottom: 10px;
              &>div{
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #F3F4F5;
                border-radius: 2px;
                flex: 0 0 74px;
                height: inherit;
              }
              //选择
              .selectedClass{
                color: #16BC83;
                background-color: #ECFBF6;
              }
            }
          }
        }
      }
    }
    .btn-group{
      position: fixed;
      bottom: 0;
      display: flex;
      width: 279px;
      background-color: #fff;
      padding: 0;
      box-sizing: border-box;
      align-items: flex-end;
      &>*{
        flex: 1 1 auto;
        border: none !important;
        border-radius: 0 !important;
      }
      &>:first-child{
        background-color: #F4F6F5;
        height: 35px;
      }
      &>:last-child{
        background-color: #00C8B4;
        height: 35px;
        & span{
          color: #fff !important;
        }
      }
    }
  }
}

    .making{
      width: 100vw;
      height: 100vh;
      position: fixed;
      right: 0;
      top: 44PX;
      bottom: 0;
      background-color: rgba(51, 51, 51, 0.5);
    }
.child-atlas{
  padding: 20px 12px;
  // display: flex;
  // flex-wrap: wrap;
  // background-color: #F5F6F7;
  box-sizing: border-box;
  .list-child-atlas-item{
    // flex: 0 0 170px;
    margin-bottom: 10px;
    height: 223px;
    padding: 5px 5px 10px 5px;
    box-sizing: border-box;
    background-color: white;
    .list-child-atlas-item-img{
      width: 100%;
      height: 178px;
    }
    .list-child-atlas-item-name{
      font-size: 14px;
      color: #333;
      height: 20px;
      line-height: 20px;
      text-align: center;
      margin-top: 10px;
      font-weight: 600;
      .textOverflow()
    }
  }
}
</style>
